<!-- 接口定义弹框 -->
<template>
  <el-dialog title="添加能力" :visible.sync="dialogVisible" width="60%">
    <el-table
      ref="table"
      :data="tableData"
      style="width: 100%"
      @selection-change="handleSelectionChange"
    >
      <el-table-column header-align="center" align="center" type="selection" width="55"></el-table-column>
      <el-table-column prop="jkmc" label="能力名称"></el-table-column>
      <el-table-column prop="jkms" label="概述" show-overflow-tooltip></el-table-column>
    </el-table>
    <!-- 分页 -->
    <div class="page">
      <el-pagination
        background
        @size-change="changePageSize"
        @current-change="changePageNum"
        :current-page="form.pageNum"
        :page-sizes="[10, 20, 50, 100]"
        :page-size="form.pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
      ></el-pagination>
    </div>
    <span slot="footer" class="dialog-footer">
      <el-button @click="dialogVisible = false">取 消</el-button>
      <el-button type="primary" @click="addRows">确 定</el-button>
    </span>
  </el-dialog>
</template>
<script>
import jkglService from '@/api/jkgl'

export default {
  data() {
    return {
      //能力类目弹框
      dialogVisible: false,
      form: {
        filter: {
          cjrymc: "",
          jkmc: ""
        },
        orderBy: "",
        pageNum: 1,
        pageSize: 20
      },
      // 接口定义分类参数
      jkdyflForm: {
        jkbhList: [],// 接口编号列表        
        jkflbh: ""// 接口分类编号
      },
      // 表格数据
      tableData: [],
      // 接口定义选择框
      jkdySelection: [],
      total: 0,
    }
  },
  mounted() {
    this.changePageNum(1);
  },
  methods: {
    /*
     * 打开弹框
     */
    openDialog(val) {
      //清空数据
      this.jkdyflForm.jkbhList = [];
      this.jkdyflForm.jkflbh = '';
      this.dialogVisible = true;
      this.$nextTick(() => {
        this.jkdyflForm.jkflbh = val;
        this.$refs.table.clearSelection();
      });
    },
    /** 处理多选框 */
    handleSelectionChange(val) {
      this.jkdySelection = val.map(item => item.jkbh);
      this.jkdyflForm.jkbhList = this.jkdySelection;
    },
    /*
     * 添加能力到分类
     */
    addRows() {
      const params = this.jkdyflForm;
      if (this.jkdyflForm.jkflbh) {
        if (this.jkdyflForm.jkbhList.length <= 0) {
          this.$message({ type: 'warning', message: '请先选择能力！' })
        } else {
          jkglService
            .updateJkdyfl(params)
            .then(res => {
              this.$message({ type: 'success', message: '添加能力成功！' })
              this.dialogVisible = false;
              // 刷新父组件表格
              this.$emit('updateTable');
            })
            .catch(err => {
              !err.isError &&
                this.$message({ type: 'warning', message: err.message })
            })
        }
      } else {
        this.$message({ type: 'warning', message: '请先选择能力分类！' })
      }

    },
    /*
     * 获取未发布能力
     */
    getNlList() {
      const params = this.form;
      jkglService
        .queryWfljkdy(params)
        .then(res => {
          this.tableData = res.list;
          this.total = res.total;
        })
        .catch(err => {
          !err.isError &&
            this.$message({ type: 'warning', message: err.message })
        })
    },
    /*
     * 分页
     */
    changePageNum(val) {
      this.form.pageNum = val;
      this.getNlList();
    },
    /*
     * 分页
     */
    changePageSize(val) {
      this.form.pageSize = val;
      this.form.pageNum = 1;
      this.getNlList();
    },
  }
}
</script>
<style lang="scss" scoped>
.page {
  text-align: center;
  padding-top: 10px;
}
</style>
